<template>
	<view class="container">
		<view>
			<view class="banner">
				<view class="banner-list" @click="headerClick">
					<text>入库编号</text>
					<view>
						<text>{{detail.invoicesNo}}</text>
						<image class="iptpic" v-if="picUpFlag && status==2200" mode="scaleToFill" src="/static/image/index/三角2.png" />
						<image class="iptpic" v-if="picDwonFlag && status==2200" mode="scaleToFill" src="/static/image/index/三角1.png" />
					</view>
				</view>
				<view v-if="headerContent">
					<view v-if="status==2201" class="banner-list">
						<text>物料总类</text>
						<text>{{detail.kind}}</text>
					</view>
					<view v-if="status==2200" class="banner-list">
						<text>供应商</text>
						<text>{{detail.newArr.companyName}}</text>
					</view>
					<view v-if="status==2201" class="banner-list">
						<text>创建人</text>
						<text>{{detail.createUser}}</text>
					</view>
					<view class="banner-list">
						<text>采购单号</text>
						<text>{{detail.linkNo}}</text>
					</view>
					<view v-if="status==2200" class="banner-list">
						<text>收货人</text>
						<text>{{detail.employeeName}}</text>
					</view>
					<view v-if="status==2200" class="banner-list">
						<text>收货时间</text>
						<text>{{detail.updateTime}}</text>
					</view>
					<view v-if="status==2201" class="banner-list">
						<text>状态</text>
						<text v-if="status==2201">已入库</text>
					</view>

				</view>
			</view>
			<view class="ipt" v-if="status==2200">
			<image class="iputpic" mode="scaleToFill" src="/static/image/index/sousuo.png"/>
			  <input class="input" @confirm="doSearch" @blur="blurSearch" v-model="selectName" placeholder="输入搜索内容"  placeholder-class="olderStyle"/>
			</view> 
			<view>
				<view class="banner active" v-for="(item,index) in groups" :key="index">
					<!-- 选择-->
					<checkbox-group @change="selectList(item)" v-if="status==2200">
						<checkbox :checked="item.selected" />
					</checkbox-group>
					<view class="banner-top">
						<view class="top-nav" @click="information">
							<view class="top-details">
								<image mode="scaleToFill" class="details-img" src="/static/image/index/logo.png" />
								<view class="details-text">
									<text style="color: red;font-size: 28rpx;">{{item.shortName}}</text>
									<text>{{item.materialNo}}</text>
									<view>
									<text class="greenActive" v-if="status==2200">{{item.paramstr}}</text>
									<text v-if="status==2201">数量:<text style="color: #147796;">{{item.opCount}}{{item.secondUnit}}</text></text>
									</view>
									<text style="color: #455DA3;" v-if="status==2200">{{item.mainUnit}}</text>
								</view>
							</view>
							<view v-if="status==2201" class="top-nav-text" @click="showMoreAttr(item)">查看属性</view>
						</view>
						<view class="top-text" v-if="status==2200">
							数量:<text style="color: #147796;">{{item.opCount}}{{item.secondUnit}}</text>
						</view>
						<view class="top-text" >
							批次号:{{item.batchNo}}
						</view>
						<view class="selectLibrary" @tap="scan(index)" v-if="status==2200">
							{{item.defaultDataName?item.defaultDataName:'请选择库位'}}
						</view>
						<view class="bottomStyle" v-if="status==2201">
							<text>仓库：{{item.inOutList[0].warehouseName}}</text>
							<text>库位：{{item.inOutList[0].locationNo}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mask" v-if="attrFlag">
	    <view class="mask-content"  v-for="(item,index) in paramNewArr" :key="index">
	      <view class="mask-title">物料属性</view>
	      <view class="mask-nav">
	        <text>{{item.unit}}</text>
	        <text>{{item.value}}</text>
	      </view>
	      <view class="mask-cancel" @click="cancel">取消</view>
	    </view>
	  </view>
		</view>
		<view class="footer" v-if="status==2200">
			<view class="opt">
				<checkbox-group @change="checkAll">
					<checkbox :checked="selectAllStatus" />
				</checkbox-group>
				<text class="">全选</text>
			</view>
			<view class="Scan" @tap="scanbBatch">扫库位码批量入库</view>
			<button class="submit" @click="submit">提交</button>
		</view>
		<!-- 物料信息 -->
		<view v-if='materialfalg&&status==2200' class="disalog-box" @touchmove.stop.prevent="moveHandle">
			<view class="disalog-content" v-for="(item,index) in groups" :key="index">
				<view class="disalog-title">
					物料信息
				</view>
				<view class="content-box">
						<view class="title-item">
							名称
						</view>
						<view class="value-item" style="color:#ff4400;">
							{{item.shortName}}
						</view>
						<view class="title-item">
							简称
						</view>
						<view class="value-item">
							{{item.shortName}}
						</view>
						<view class="title-item">
							编号
						</view>
						<view class="value-item">
							{{item.materialNo}}
						</view>
						<view class="sign-tag">
							{{item.mainUnit}}
						</view>
						<view class="table-box">
							<view class="table-row th">
								<view class="table-cell">
									序号
								</view>
								<view class="table-cell">
									属性
								</view>
								<view class="table-cell">
									属性值
								</view>
							</view>
							<view class="table-row" v-for="(ite,index) in item.paramArr">
								<view class="table-cell">
									{{index + 1}}
								</view>
								<view class="table-cell">
									{{ite.unit}}
								</view>
								<view class="table-cell">
									{{ite.value}}
								</view>
							</view>
						</view>
						<view class="button" @click="close">
							关闭
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import {getUrlJson} from '@/utils/utils.js';
	export default {
		data() {
			return {
				detail:{},
				materialfalg: false,
				headerContent: true,
				picUpFlag: true,
				picDwonFlag: false,
				attrFlag: false,
				groups: [],
				selectAllStatus: false,
				status:'',
				selectName:'',
				paramNewArr:[],
				storehouseName:'',
				defaultDataName: '',
				storehouseId: '',
				
				materialList:[],
				
			}
		},
		onLoad(option) {
			console.log(option.id);
			if (option.id) {
				this.id = option.id
			}
			if (option.status) {
				this.status = option.status
			}
		
		},
		mounted(){
			this.purchaseDetail()
		},
		methods: {
			// 默认库位
			defaultLocation() {
				let groups = this.groups
				let obj = {
					search: "SHQ-001",
					warehouseId: '',
					status: '',
					currentPage: 1,
					pageSize: 15,
				}
				api.defaultNews(obj).then(res => {
					if (res.code == 0) {
						groups.forEach(item => {
							item.defaultDataName = res.data.result[0].storehouseNo
							console.log('kkkkoooook--->', item.defaultDataName)
							item.storehouseId = res.data.result[0].id
						})
						this.groups = groups
						console.log('0000===>', this.groups)
						this.$forceUpdate()
						// this.storehouseId = res.data.result[0].id
					}
				})
			},
			
			// 批量入库
			scanbBatch(){
				const goods = this.groups.filter(item => {
					return item.selected === true
				})
				if (goods.length < 1) {
					uni.showToast({
						title: '请勾选物料',
						icon: 'none',
						duration: 2000
					});
					return
				}
				let _this = this
				uni.scanCode({
					success: function(res) {
						let data = getUrlJson(res.result);
						console.log(getUrlJson(res.result));
						if (data.t == 'STOREHOUSE') {
							api.selectedLibrary(data.id).then(res => {
								if (res.code == 0) {
									goods.forEach(item => {
										item.defaultDataName = res.data.storehouseNo
										item.storehouseId = res.data.id
									})
									_this.$forceUpdate()
									console.log('goods--->', goods)
				
								}
							})
						} else {
							uni.showToast({
								title: '暂不支持该类型二维码',
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
				
			},
			// 提交
			submit(){
					let flag = true
				this.materialList=[]
					 let bbb= this.groups.filter(item=>{
						return item.selected==true
					})
					let aaa = []
					let ccc = []
					console.log('kkk--->',bbb)
					bbb.forEach(ite=>{
						this.materialList.push(
						{
							id:ite.id,
							locationId:ite.storehouseId,
						}
						)
						if (!ite.storehouseId) {
							console.log(1231212)
							flag = false
							return true
						}
						
					})
					if(!flag){
						uni.showToast({
							title: '请选折库位',
							icon:'none',
							duration: 2000
						});
						return
					}
					// console.log('ooo-->',)
						
						if(bbb.length<1){
							uni.showToast({
							title: '请勾选物料',
							duration: 2000,
							icon:'none',
							});
							return
						}
				let obj={
					id:this.id,
					materialList:this.materialList,
				}
				api.warehousingSubmit(obj).then(res => {
					if (res.code == 0) {
						uni.showToast({
						title: '提交成功',
						duration: 2000,
						});
						this.submitId=res.data.id
					}
					})
				// uni.navigateTo({
				// 	url: "/subcontractList/storage/materialIn/selectBatch"
				// })
			},
			// 搜索
			blurSearch(){
			   this.purchaseDetail()
			},
			// 搜索回车
			doSearch(){
				this.purchaseDetail()
			},
			purchaseDetail(){
				if(this.status==2200){
					let obj = {
						id: this.id,
						isOut:0,
						subSearch:this.selectName
					}
					api.purchaseListDetail(obj).then(res => {
						if (res.code == 0) {
							let data = res.data
							this.detail = data
							this.detail.newArr=[];
							this.detail.newArr=	JSON.parse(this.detail.invoicesJson);						
							console.log('nnn--->',this.detail.newArr)
							this.groups=this.detail.materialList
							this.groups.forEach(item=>{
								item.storehouseName=''
								item.storehouseId=''
								item.selected=false
								item.paramArr = [];
								     let str = '';
								item.param = JSON.parse(item.param);
								
								for(let i  in item.param){
									item.paramArr.push({'unit':i,'value':item.param[i]});
									console.log("item.param--->",item.paramArr)
									str = str + i+ '：'+item.param[i]+ '/';
								}
								
								str = str.substring(0,str.length - 1);
								item.paramstr = str;
								
							})
						}
						this.defaultLocation()
						})
				}
				if(this.status==2201){
					let obj = {
						id: this.id,
						isOut:0,
					}
					api.purchaseListDetail(obj).then(res => {
						if (res.code == 0) {
							let data = res.data
							this.detail = data
							this.groups=this.detail.materialList
							this.groups.forEach(item=>{
								item.selected=false
								item.paramArr = [];
								     let str = '';
								item.param = JSON.parse(item.param);
								
								for(let i  in item.param){
									item.paramArr.push({'unit':i,'value':item.param[i]});
									console.log("item.param--->",item.paramArr)
									str = str + i+ '：'+item.param[i]+ '/';
								}
								
								str = str.substring(0,str.length - 1);
								item.paramstr = str;
							})
						}
						})
				}
				
			},
			// 扫码
			scan(index) {
			let _this = this
			let groups = this.groups
			uni.scanCode({
				success: function(res) {
					console.log('条码内容：' + res.result);
					let data = getUrlJson(res.result);
					console.log(getUrlJson(res.result));
				if(data.t=='STOREHOUSE'){	
					api.selectedLibrary(data.id).then(res => {
						if (res.code == 0) {
							_this.$set(groups[index], 'defaultDataName', res.data.storehouseNo)
							_this.$set(groups[index], 'storehouseId', res.data.id)
							console.log('ddddddddppppp', groups[index].defaultDataName)
							_this.groups = groups;
							_this.$forceUpdate()
						}
						})
				}else {
						uni.showToast({
							title: '暂不支持该类型二维码',
							icon: 'none',
							duration: 2000
						});
					}
				}
			});
			},
			// 物料信息
			information() {
				this.materialfalg = true
			},
			close() {
				this.materialfalg = false
			},
			headerClick() {
				if(this.status==2200){
					this.picUpFlag = !this.picUpFlag
					this.picDwonFlag = !this.picDwonFlag
					this.headerContent = !this.headerContent
				}
			
			},
			showMoreAttr(item){
				console.log('item--->',item)
				this.paramNewArr=item.paramArr
				this.attrFlag=true
			},
			cancel(){
			     this.attrFlag=false
			},
			// 单个商品的选择
			selectList(item) {
				item.selected = !item.selected
				if (!item.selected) {
					this.selectAllStatus = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = this.groups.every(item => {
						return item.selected === true
						this.selectAllStatus = true
					})
					if (goods) {
						this.selectAllStatus = true
					} else {
						this.selectAllStatus = false
					}
				}
			},

			checkAll() {
				this.selectAllStatus = !this.selectAllStatus
				if (this.selectAllStatus) {
					this.groups.map(item => {
						item.selected = true
					})
				} else {
					this.groups.map(item => {
						item.selected = false
					})
				}
			},
		}
	}
</script>

<style>
	.olderStyle{
		font-size: 26rpx;
		z-index: 0;
	}
	.bottomStyle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
		color: #333333;
		font-size: 26rpx;
	}
	.ipt{
	  width: 90%;
	  height: 80rpx;
	  background: white;
	  border-radius: 20rpx;
	  margin: 15rpx auto;
	  display: flex;
	  align-items: center;
	  box-shadow: 0 0 6rpx 3rpx #ccc;
	  font-size: 24rpx;
	}
	.iputpic{
	  width: 40rpx;
	  height: 50rpx;
	  margin-left: 30rpx;
	}
	.input{
	  background: white;
	}
	.selectLibrary {
		width: 100%;
		height: 70rpx;
		background: #eee;
		color: #777;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		border-radius: 10rpx;
	}

	.iptpic {
		margin-left: 10rpx;
		width: 25rpx;
		height: 25rpx;
	}

	.container {
		background: #efefef;
		height: 100vh;
	}

	.title {
		width: 95%;
		height: 60rpx;
		background: white;
		margin: 10rpx auto;
	}

	.title-text {
		font-size: 26rpx;
		border-left: 8rpx solid #53ab8b;
		padding-left: 10rpx;
	}

	.banner {
		color: white;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #147796;
		border-radius: 15rpx;
		padding: 20rpx 20rpx;
		box-shadow: 0 0 3rpx 3rpx rgb(221, 215, 215);
	}

	.active {
		width: 88%;
		background: white;
		display: flex;
		align-items: center;
		padding: 40rpx 20rpx;
	}

	.banner-list {
		font-size: 26rpx;
		display: flex;
		border-bottom: #9999 solid 2rpx;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 24rpx 40rpx;
	}

	.footer-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 95%;
		font-size: 30rpx;
		color: white;
		border-radius: 10rpx;
		height: 70rpx;
		margin: 100rpx auto;
	}

	.green {
		background: #53ab8b
	}

	.top-text {
		color: #333333;
		margin-top: 20rpx;
		font-size: 26rpx;
		line-height: 40rpx;
		display: flex;
	}

	.banner-top {
		display: flex;
		flex-direction: column;
		width: 95%;
	}

	.top-nav {
		display: flex;
		justify-content: space-between;

	}

	.top-details {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.details-text {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		flex-direction: column;
		font-size: 24rpx;
		color: #333;
		line-height: 40rpx;
	}

	.details-img {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
	}

	.top-nav-text {
		margin-left: 60rpx;
		font-size: 24rpx;
		color: #333;
	}

	.mask {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4)
	}

	.mask-content {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: white;
	}

	.mask-title {
		font-size: 26rpx;
		color: #333;
		text-align: center;
		margin: 20rpx 0;
	}

	.mask-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 48rpx;
		font-size: 26rpx;
		padding: 0 28rpx;
		color: #999;
	}

	.mask-cancel {
		height: 80rpx;
		font-size: 28rpx;
		color: red;
		box-shadow: 0 -4rpx 8rpx #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}

	.mask-cancel:active {
		background: rgba(0, 0, 0, 0.1)
	}

	.greenActive {
		color: #53ab8b;
		margin-left: 20rpx;
	}

	.stuta {
		margin: 0 20rpx;
		width: 100rpx;
		height: 50rpx;
		background: #53ab8b;
		border-radius: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.footer {
		width: 100%;
		height: 50rpx;
		background: white;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		font-size: 26rpx;
	}

	.opt {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.Scan {
		width: 250rpx;
		height: 70rpx;
		color: white;
		background: #455da3;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		border-radius: 10rpx;
	}

	.submit {
		width: 150rpx;
		height: 70rpx;
		color: white;
		background: #455da3;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
</style>
<style lang="scss" scoped>
	.disalog-box {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.6);

		.disalog-content {
			background-color: white;
			border-radius: 10rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			animation-name: disalogshow;
			animation-duration: 1s;
			width: calc(100% - 20rpx);
			transform: translate(-50%, -50%);
			box-sizing: border-box;
			padding: 20rpx;

			.disalog-title {
				text-align: center;
			}

			.content-box {
				font-size: 26rpx;
				line-height: 50rpx;

				.title-item {
					font-weight: bold;
				}

				.value-item {
					color: #6a5acd;
					padding-left: 40rpx;
				}

				.sign-tag {
					background-color: #eaeaea;
					border-radius: 10rpx;
					line-height: 70rpx;
					color: #6a5acd;
					padding: 0 40rpx;
				}

				.table-box {
					display: table;
					width: 100%;
					border-radius: 10rpx 10rpx 0 0;
					margin: 20rpx 0;
					overflow: hidden;

					.table-row {
						display: table-row;
					}

					.table-cell {
						text-align: center;
						display: table-cell;
						background-color: #d0f0fd;
					}

					.th {


						.table-cell {
							background-color: #1793c6;
							color: white;
						}
					}
				}

				.button {
					background-color: #35af86;
					color: white;
					line-height: 70rpx;
					text-align: center;
					border-radius: 10rpx;
					margin-top: 60rpx;
				}
			}
		}

	}

	@keyframes disalogshow {
		0% {
			transform: translate(-50%, -60%);
			// transform: scale(0);
			opacity: 0;
		}

		100% {
			transform: translate(-50%, -50%);
			// transform: scale(1);
			opacity: 1;
		}
	}
</style>
